{{#in-element (selector @this.showIn)}}
<section class="max-w-4xl p-4 mx-auto rounded-md shadow-md dark:bg-gray-800">

<div class="max-w-4xl mx-auto mt-2">
  <h1 class="text-3xl font-bold text-gray-800 text-left">选择颜色</h1>

  <!-- 控制面板 -->
  <div class="bg-white p-4 rounded-lg shadow-md mb-2">
      <div class="space-y-4">
          <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">饱和度：<span>{{this.saturation}}</span>%</label>
              <input type="range" min="0" max="100" value={{this.saturation}} class="w-full range accent-indigo-600" {{on "input" this.updateSaturation}}>
          </div>
          <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">亮度：<span>{{this.lightness}}</span>%</label>
              <input type="range" min="0" max="100" value="{{this.lightness}}" class="w-full range accent-indigo-600" {{on "input" this.updateLightness}}>
          </div>
          <input type="hidden" name="colorR" form="watermarkItem" value="{{this.rgbRValue}}"/>
          <input type="hidden" name="colorG" form="watermarkItem" value="{{this.rgbGValue}}"/>
          <input type="hidden" name="colorB" form="watermarkItem" value="{{this.rgbBValue}}"/>
      </div>
  </div>

  <!-- 调色板 -->
  <div class="grid grid-cols-12 gap-2 mb-8">
  {{#each this.colorList as |color index|}}
    <div {{on "click" (fn this.updateHue color.hue)}} class="w-12 h-12 rounded cursor-pointer shadow-sm hover:scale-110 transition-transform" style="background-color:{{color.hsl}}"/>
  {{/each}}
  </div>

  <!-- 选中颜色显示 -->
  <div class="bg-white p-6 rounded-lg shadow-md">
      <div class="w-full h-16 rounded-lg flex flex-col items-center justify-center transition-colors" style="background-color: rgb({{this.rgbRValue}}, {{this.rgbGValue}}, {{this.rgbBValue}})">
          <span class="text-lg font-semibold mb-2">{{this.hexValue}}</span>
          <span class="text-sm">`RGB: {{this.rgbRValue}}, {{this.rgbGValue}}, {{this.rgbBValue}}`</span>
      </div>
  </div>
</div>

<div class="flex justify-end gap-6 mt-4">
  <T::Button {{on "click" @hideModal}} class="text-sm bg-gray-600 hover:bg-gray-500">关闭</T::Button>
  <T::Button {{on "click" this.submit}} class="text-sm">提交</T::Button>
</div>
</section>
{{/in-element}}